<template>
	<u-popup closeable mode="bottom" v-model.sync="show" border-radius="12" :height="height" @close="popupClose"
		@open="popupOpen">
		<div class="title">
			{{total}}条评论
		</div>
		<scroll-view class="listWrap scroll-Y" scroll-y="true" :scroll-top="scrollTop" @scrolltoupper="scrolltoupper"
			@scrolltolower="scrolltolower" @scroll="scroll">
			<view v-for="(item,index) in commentList" :key="index" class="u-flex u-col-top u-p-20 commentBox"
				@longpress="commentLongpress(item)">
				<u-avatar size="70" :src="item.member.headimgurl" @click="goShopPage(item)"></u-avatar>
				<view class="contentWrap u-m-l-20">
					<view class="name">
						{{item.member.user_name}}
						<span class="badge" v-if="item.isShoper">
							商家
						</span>
					</view>
					<view class="comment-content">
						{{item.content}}
					</view>
					<view class="u-flex time u-m-t-10">
						<text>{{$u.timeFrom(item.create_time , 'yyyyy-mm-dd')}}</text>
						<text class="u-m-l-20" @click="reply(item)">回复</text>
					</view>

					<!--二级评论区-->
					<view v-if="item.child&&item.child.data.length">
						<div class="childBox u-m-t-20" v-if="item.expand">
							<div v-for="childItem in item.child.data" :key="childItem.id" class="u-flex u-col-top">
								<u-image class="uavatar" :src="childItem.member.headimgurl" shape="circle" width="38"
									height="38"></u-image>
								<view class="child-content-wrap">
									<view class="name">{{childItem.member.user_name}}</view>
									<view class="comment-content">{{childItem.content}}</view>
									<view class="time u-m-t-10">
										<text>{{$u.timeFrom(childItem.create_time , 'yyyyy-mm-dd')}}</text>
										<!-- <text class="u-m-l-20" @click="reply(item)">回复</text> -->
									</view>
								</view>
							</div>
						</div>

						<p class="replyTips u-flex u-col-center u-m-t-20" @click="expandComment(item,index)">
							<text class="replyTips-line"></text>
							<text>{{getExpandWord(item)}}</text>
							<u-icon :name="item.expand?'arrow-up':'arrow-down'" color="#c1c1c1" size="24"></u-icon>
						</p>
					</view>
					<!--二级评论区-->

				</view>
				<div class="appraise" v-if="false">
					<u-icon name="heart-fill" color="#909399" size="36" class="heart"></u-icon>
					<div>{{item.id}}</div>
				</div>
			</view>
			<u-loadmore :status="loadingStatus" />
		</scroll-view>
		
		<enterComment @submit="submitCommnet" ref="enterComment"></enterComment>
	</u-popup>
</template>

<script>
	import enterComment from "./h5mpEnterComment";
	export default {
		data() {
			return {
				show: false,
				height: '1020',
				video_id: 0,
				focus: false,
				parentId: 0,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				showLoading: false,

			}
		},
		components: {
			enterComment
		},
		props: {
			commentList: {
				type: Array,
				required: true,
				default: () => []
			},
			total: {
				type: Number,
				default: 0
			},
			loadingStatus: {
				type: String,
				default: 'loadmore'
			},
		},
		mounted() {
			const len = this.commentList.length
			if (len && len <= 4) {
				this.height = String(270 * len)
			}
			// #ifdef H5
			document.oncontextmenu = function(e) {
				e.preventDefault();
			};
			// #endif
		},
		methods: {
			open() {
				this.show = true
			},
			close() {
				this.show = false
			},
			reply(commentItem) {
				const {
					id
				} = commentItem
				this.parentId = id
				this.$refs.enterComment.focus = true
			},
			clearContent() {
				// this.$refs.enterComment.value = ''
			},
			goShopPage(item) {
				if (!item.isShoper) return
				const {
					member: {
						id: shop_id
					}
				} = item
				console.log(item)
				this.$u.route('/pagesC/shop/storeDetails', {
					shop_id
				});
			},
			submitCommnet(value) {
				const {
					parentId
				} = this
				this.$refs.enterComment.focus = false
				this.$emit('submitCommnet', {
					content: value,
					parentId
				})
			},
			expandComment(item, index) {
				const {
					expand
				} = item
				this.$set(this.commentList[index], 'expand', !expand)
			},
			getExpandWord(item) {
				const {
					expand,
					child: {
						total
					}
				} = item
				return expand ? '收起' : '展开'+`${total}`+'条回复'
			},
			commentLongpress(item) {
				this.$emit('commentLongpress', item)
			},
			scroll(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			scrolltoupper(e) {
				// console.log(e)
			},
			scrolltolower(e) {
				this.$emit('scrolltolower')
			},
			popupOpen() {
				// this.commentList.splice(0,this.commentList.length)
			},
			popupClose() {

			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '~uview-ui/index.scss';
	.listWrap {
		padding-bottom: 120rpx;
		height: 100%;

	}

	.title {
		color: $u-content-color;
		font-size: 24rpx;
		padding: 18rpx;
		text-align: center;
	}

	.commentBox {
		

		.contentWrap {
			color: #fff;
			width: 80%;
			font-size: 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;

			.name {
				font-size: 24rpx;
				color: #606266;
			}

			.badge {
				display: inline-block;
				padding: 0 8rpx;
				background-color: #f91955;
				color: #fff;
				font-size: 24rpx;
				border-radius: 4rpx;
				margin-left: 8rpx;
			}

			.comment-content {
				font-size: 28rpx;
				color: $u-main-color;
			}

			.time {
				color: #999;
				font-size: 24rpx;
			}

			.replyTips {
				color: $u-tips-color;
				font-size: 24rpx;

				&-line {
					display: inline-block;
					width: 40rpx;
					height: 2rpx;
					background-color: $u-light-color;
					margin-right: 14rpx;
				}
			}

			.childBox {
				transition: all 0.8s;

				.uavatar {
					margin-right: 10rpx;
				}
				
				.child-content-wrap{
					width: 100%;
				}
			}
		}

		.appraise {
			position: absolute;
			right: 10px;
			top: 60rpx;
			color: $u-tips-color
		}
	}
</style>
